<template>
  <div class="container">
    <div class="mainCon">
      <div class="cashDepositExplain">
        <ul class="explain clearfix">
          <li class="imgCon">
            <img
              src="../../../static/img/newInsurance/guaranteePic.png"
              alt=""
            />
          </li>
          <li class="textExplain">
            <div class="title">农民工工资保证金第三方担保</div>
            <div class="explainInfo">
              以第三方担保代替农民工工资保证金缴存，优化营商环境，减轻企业负担；释放企业资金活力，发挥企业资金效能。
            </div>
            <div class="explainInfo" style="margin-bottom: 9px">
              项目名称：<span>{{ project.projectName }}</span>
            </div>
            <div class="explainInfo explainItem">
              保函类型：
              <div>
                <span
                  :class="
                    showType != index ? 'butSty' : 'butSty selectedButSty'
                  "
                  v-for="(item, index) of typeOptions"
                  :key="index"
                  @click="findByInsureType(item.code, index)"
                >
                  <img
                    src="../../../static/img/newInsurance/choice.png"
                    alt=""
                    class="imgSty"
                    v-show="showType == index"
                  />
                  {{ item.name }}
                </span>
              </div>
            </div>
            <div class="explainInfo explainItem">
              <i>承保机构：</i>
              <div class="typeBox">
                <!-- <img src="../../../static/img/newInsurance/tp.png" alt="" class = "imgSty"> -->
                <span
                  :class="
                    showInsure != index ? 'butSty' : 'butSty selectedButSty'
                  "
                  v-for="(item, index) of insureTypeList"
                  :key="index"
                  @click="findType(item.id, index)"
                >
                  <img
                    src="../../../static/img/newInsurance/choice.png"
                    alt=""
                    class="imgSty"
                    v-show="showInsure == index"
                  />
                  {{ item.name }}
                </span>
              </div>
            </div>
            <div class="explainInfo" style="margin-top: 0">
              <div v-if="name">
                {{ name }}：<span class="redColor">{{ description }}</span>
              </div>
            </div>
            <el-button class="commonBut saveBtn" @click="registerNow">
              立即登记
            </el-button>
          </li>
        </ul>
      </div>
      <div class="spacing"></div>
      <div class="conInfo">
        <div class="infoTit">第三方担保简介</div>
        <div class="infoCon">
          施工总承包单位按规定缴存工资保证金时，可以选择现金形式缴存，也可合法选择以银行保函、保证保险及工程担保公司保函等第三方担保方式中的一种或多种代替缴存。
        </div>
        <div class="infoTit" style="margin-top: 40px">第三方担保的启用</div>
        <ul class="infoCon">
          <li>
            工程建设项目在保函或保险有效期内，经人社部门和工程建设项目主管部门共同认定存在以下情形之一，且未在劳动保障监察行政处理处罚决定书规定期限内旅行支付义务的，人社部门根据实际需要可启用保函或保单，向银行机构、保险机构以及工程担保公司申请索赔垫付农民工工资：
          </li>
          <li>
            （一）建设单位或施工方总承包企业违法分包、转包或违法分包，致使拖欠农民工工资的；
          </li>
          <li>
            （二）建设单位或施工总承包企业拖欠工程款，致使拖欠农民工工资的；
          </li>
          <li>（三）招用农民工的分包单位拖欠农民工工资的；</li>
          <li>
            （四）工程建设项目未按规定落实实名制管理、工资专用账户和总承包银行代发工资，致使拖欠农民工工资的；
          </li>
          <li>
            （五）建设单位或施工企业被人民法院宣告破产并进入清算程序，尚未足额支付农民工工资的；
          </li>
          <li>
            （六）因拖欠农民工工资引发极端、群体性讨薪突发事件，造成不良社会影响的；
          </li>
          <li>
            （七）其他违法国家规定或劳动合同约定未及时足额支付农民工工资，造成不良社会影响的；
          </li>
          <li style="margin-top: 30px">
            人社部门依法下达劳动保障行政处理处罚决定书，包括依法作出的责令清偿、先行清偿、先行垫付等决定；施工总承包企业确因资金困难或不可抗力等原因难以支付农民工工资，经人社部门劳动保障监察机构同意，可与银行机构、保险机构及工程担保公司协商启用保函或保单，通过农民工工资专用账户支付农民工工资。
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'insuranceOrderGuide',
  components: {},
  data() {
    return {
      isDisabled: false,
      projectId: this.$store.state.projectId,
      project: {},
      typeOptions: [],
      insureTypeList: [],
      showType: 0,
      showInsure: 0,
      type: '', //保函类型
      code: '', //承保机构
      description: '',
      name: '',
    }
  },
  created() {
    this.$store.commit('set_active_index', '/home/newInsurance/insuranceOrder')
    this.$store.commit('CHANGE_SLIDER_NAME', {
      oldUrl: '/home/newInsurance/insuranceOrder',
      newUrl: this.$router.currentRoute.fullPath,
    })
    this.getProjectInfo()
    this.getSelectData()
    this.findByInsureType()
  },

  methods: {
    getSelectData() {
      this.axios({
        method: 'post',
        url: 'api-bs/base/dicitem/findbytype',
        data: {
          type: 'DEPOSIT_INSURE_TYPE',
        },
      })
        .then((response) => {
          this.typeOptions = response.data.result
        })
        .catch((response) => {})
    },
    findByInsureType(insureType, index) {
      this.showInsure = 0
      this.showType = index ? index : '0'
      this.type = insureType ? insureType : 'DEP_INSURE'

      this.axios({
        method: 'post',
        url: 'api-d/insconfiginsurers/findByInsureType',
        data: {
          insureType: insureType ? insureType : 'DEP_INSURE',
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.insureTypeList = response.data.result
            if (this.insureTypeList.length > 0) {
              this.code = this.insureTypeList[0].id
              this.description = this.insureTypeList[0].description
              this.name = this.insureTypeList[0].name
            } else {
              this.code = ''
              this.description = ''
              this.name = ''
            }
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    findType(code, index) {
      this.showInsure = index
      this.code = code
      this.description = this.insureTypeList[index].description
      this.name = this.insureTypeList[index].name
    },
    getProjectInfo() {
      return this.axios({
        method: 'post',
        url: '/api-p/project/expand/projectdetail',
        data: {
          projectId: this.projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.project = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    registerNow() {
      // if(this.project && this.project.statusDesc == "已竣工") {
      //     this.$message.error("此项目已竣工，不能投保。");
      //     return;
      // }else {
      this.$router.push({
        path: '/home/newInsurance/insuranceOrderProgress',
        name: 'insuranceOrderProgress',
        query: {
          step: 1,
          type: 'add',
          agency: this.code,
          insuretype: this.type,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/newInsurance/insuranceOrder',
        newUrl: this.$router.currentRoute.fullPath,
      })
      // }
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.mainCon {
  // position: absolute;
  // top: 0px;
  // left: 0px;
  // right: 0;
  // bottom: 0px;
  overflow-y: auto;
  // background: #fff;
  // padding: 0;
  // background: #FFFFFF;
  // border: 2px solid #009588;
  // border-radius: 4px;
  // border-radius: 4px;
}
.cashDepositExplain {
  // background: #ECF5F6;
  border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0px 0px;
  margin-bottom: 32px;
  .imgCon {
    float: left;
    padding-left: 117px;
    img {
      height: 160px;
    }
  }

  .textExplain {
    float: left;
    padding-left: 21px;
    padding-right: 117px;
    // width: calc(100%-298px);
    width: calc(100% - 388px);
    .title {
      font-size: 24px;
      color: #333333;
      font-weight: 700;
    }
    .explainInfo {
      font-size: 14px;
      color: #333;
      margin-bottom: 18px;
      margin-top: 20px;
    }
    .explainItem {
      margin-bottom: 0;
      margin-top: 2px;
      div {
        display: inline-block;
        width: calc(100% - 75px);
      }
      i {
        font-style: normal;
      }
    }
    .supplementaryInstruction {
      font-size: 14px;
      color: #999999;
      margin-top: 32px;
      margin-bottom: 13px;
    }
    .butSty {
      display: inline-block;
      text-align: center;
      // width: 112px;
      padding: 0 16px;
      height: 36px;
      background: #ffffff;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      line-height: 36px;
      font-size: 14px;
      color: #333;
      font-weight: 500;
      cursor: pointer;
      position: relative;
      margin: 9px 0;
      margin-right: 12px;
    }
    .butSty .imgSty {
      position: absolute;
      left: 0;
      top: 0;
    }
    .selectedButSty {
      border: 1px solid #48a6ff;
      color: #48a6ff;
    }
  }
  // .imgSty {
  //     vertical-align: middle;
  // }
}
//引导页添加禁用样式
.bzjAddJc.el-button.is-disabled {
  color: #fff;
  background-color: #009588;
  border-color: #009588;
}
.conInfo {
  padding: 30px 117px 14px;
  .infoTit {
    font-size: 18px;
    color: #333333;
    font-weight: 700;
    margin-bottom: 5px;
  }
  .infoCon {
    font-size: 14px;
    color: #333333;
    li {
      margin-bottom: 5px;
    }
  }
}
.typeBox {
  vertical-align: middle;
  // margin-top: -10px;
}
</style>
